<script setup>
import api from '../api/member_api.js'
import courseAPI from '../api/course_api.js'
import {ref, onMounted} from "vue";
import {ElMessageBox} from "element-plus";
import lodash from 'lodash'

//定义绑定的数据
//表格中的数据
const tableData = ref([]);

const total=ref(0);
//定义对话框的显示状态
const editWinVisible = ref(false);
//查询数据
const searchObj = ref({
  current: 1,
  limit: 10,
  name: '',
  phone: ''
});

//要修改或者新增的数据
const obj = ref({});

const reseve=ref({});

const search = async () => {
  var result = await api.page(searchObj.value);
  tableData.value = result.data;
  total.value=result.count;
}
//页面加载后要挂载的数据
onMounted(async () => {
  search();
});
//定义方法

const handleSizeChange=()=>{
  search();
}
const handleCurrentChange=()=>{
  search();
}

const handlerSearch = () => {
  searchObj.value.current = 1;
  search();
}
const editCancel = () => {
  obj.value = {};//清空数据
  editWinVisible.value = false;//关闭对话框
}
const editCommit = async () => {
  await api.edit(obj.value);//提交修改数据
  search();//刷新表格
  editWinVisible.value = false;//关闭编辑对话框
}

const selectCourseWinVisible=ref(false);
const courses=ref([]);
const handleSelect=async (index,row)=>{
  courses.value=await courseAPI.all();
  selectCourseWinVisible.value=true;
}
const handleEdit = (index, row) => {
  obj.value=lodash.clone(row);
  editWinVisible.value = true;
  console.log(index, row)
}
const handleDelete = (index, row) => {
  ElMessageBox.confirm(
      '确认删除该行数据吗?',
      '删除提示',
      {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'error',
      }
  )
      .then(async() => {
        api.del(row.id);
        //重新加载数据
        //设置从第一页开始查询
        searchObj.value.current = 1;
        search();
      })
      .catch(() => {
      })
}
</script>

<template>
  <el-form :inline="true" :model="searchObj" class="demo-form-inline" style="margin-top:10px">
    <el-form-item label="手机号">
      <el-input v-model="searchObj.phone" placeholder="请输入手机号" clearable />
    </el-form-item>
    <el-form-item label="姓名">
      <el-input v-model="searchObj.name" placeholder="请输入姓名" clearable />
    </el-form-item>

  </el-form>
  <el-form :inline="true">
    <el-form-item>
      <el-button type="primary" @click="handlerSearch">查询</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handlerAdd">新增</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="手机号" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <!--          <el-icon><timer /></el-icon>-->
          <span style="margin-left: 10px">{{ scope.row.phone }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="Name" width="180">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <div>name: {{ scope.row.name }}</div>
            <div>address: {{ scope.row.address }}</div>
          </template>
          <template #reference>
            <el-tag>{{ scope.row.name }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="处理按钮">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
          编辑
        </el-button>
        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
        >
          删除
        </el-button>
        <el-button size="small" @click="handleSelect(scope.$index, scope.row)">
          选课
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
      v-model:current-page="searchObj.current"
      v-model:page-size="searchObj.limit"
      :page-sizes="[10, 20, 30, 50]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />
  <el-dialog v-model="selectCourseWinVisible" title="选择课程" width="500">
    <el-form :model="reseve">
      <el-form-item label="课程" :label-width="100">
        <el-select
            v-model="reseve.course_id"
            placeholder="请选择"
            style="width: 240px"
        >
          <el-option
              v-for="item in courses"
              :key="item.id"
              :label="item.name"
              :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editCancel">取消</el-button>
        <el-button type="primary" @click="editCommit">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
<!--编辑对话框-->
  <el-dialog v-model="editWinVisible" title="编辑" width="500">
    <el-form :model="obj">
      <el-form-item label="手机号" :label-width="100">
        <el-input v-model="obj.phone" autocomplete="off" />
      </el-form-item>
      <el-form-item label="姓名" :label-width="100">
        <el-input v-model="obj.name" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editCancel">取消</el-button>
        <el-button type="primary" @click="editCommit">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped></style>
